<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <el-dialog
        :close-on-click-modal="false"
        title="退回任务"
        :visible.sync="IsShowDialog"
        :destroy-on-close="true"
        :modal-append-to-body="false"
        width="500px"
        @close="crud.toQuery"
      >
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="原因" prop="reason">
            <el-input v-model="form.reason" type="textarea" rows="3" placeholder="请输入原因" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="IsShowDialog = false">取消</el-button>
          <el-button type="primary" @click="returnTask">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        size="small"
        border
        style="width: 100%;"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="flowName" label="流程名称" />
        <el-table-column prop="flowType" label="流程类别" />
        <el-table-column prop="currentNode" label="流程编号" />
        <el-table-column prop="version" label="版本" />
        <el-table-column prop="approve" label="提交人" />
        <el-table-column prop="receiveTime" label="提交时间" />
        <el-table-column prop="approveDept" label="提交部门" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column label="耗时">
          <template v-slot="scope">
            <el-button type="text" @click="completeTask(scope.row.id)">通过</el-button>
            <el-button type="text" @click="returnDialog(scope.row.id)">退回</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation.vue'
import crudOperation from '@crud/CRUD.operation.vue'
import udOperation from '@crud/UD.operation.vue'
import pagination from '@crud/Pagination.vue'
import IconSelect from '@/components/IconSelect/index.vue'
import { mapGetters } from 'vuex'
import { completeTask, returnTask } from '@/api/flow/processInstance'

const defaultForm = {
  id: null,
  flowName: null,
  currentNode: null,
  version: null,
  approve: null,
  receiveTime: null,
  flowStatus: null,
  approveDept: null,
  remark: null,
  reason: null
}
export default {
  name: 'MyToDo',
  components: { IconSelect, pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  cruds() {
    return CRUD({
      title: '系统：待办任务',
      url: 'api/processTask/myTodo',
      idField: 'id',
      sort: 'id',
      queryOnPresenterCreated: false
    })
  },
  created() {
    this.crud.params = { userId: this.user.id }
    this.crud.toQuery()
  },
  data() {
    return {
      rules: {
        reason: [
          { required: true, message: '请输入原因', trigger: 'blur' }
        ]
      },
      IsShowDialog: false,
      taskId: ''
    }
  },
  methods: {
    completeTask(taskId) {
      completeTask({ taskId: taskId }).then(res => {
        this.crud.notify('通过', CRUD.NOTIFICATION_TYPE.SUCCESS)
        this.crud.toQuery()
      })
    },
    returnDialog(taskId) {
      this.taskId = taskId
      this.IsShowDialog = true
    },
    returnTask() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.visible = false
          const data = {
            taskId: this.taskId,
            reason: this.form.reason
          }
          returnTask(data).then(res => {
            this.crud.notify('退回成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
            this.crud.toQuery()
            this.IsShowDialog = false
          })
        } else {
          return false
        }
      })
    }
  }
}

</script>

<style scoped>

</style>
